<script lang="ts" setup>
import { ref } from "vue";

const list = ref<any>([
  {
    statusValue: "1",
  },
  {
    statusValue: "2",
  },
  {
    statusValue: "3",
  },
]);

const modalVisible = ref(false);
</script>

<template>
  <umi-container min-height="844px" padding="16px" :gap="16" bg-color="#f2f2f2">
    <umi-card>
      <umi-row :gutter="16">
        <umi-col flex="50px">
          <umi-avatar></umi-avatar>
        </umi-col>
        <umi-col flex="auto">
          <umi-space direction="vertical" :size="6">
            <umi-text>黄小宝</umi-text>
            <umi-text>13512345678</umi-text>
          </umi-space>
        </umi-col>
        <umi-col flex="50px">
          <umi-image :width="50" :height="50"></umi-image>
        </umi-col>
      </umi-row>
      <umi-divider></umi-divider>
      <umi-grid cols="3">
        <umi-grid-item>
          <umi-space direction="vertical" align="center" :size="6">
            <umi-text>待核销</umi-text>
            <umi-text>10</umi-text>
          </umi-space>
        </umi-grid-item>
        <umi-grid-item>
          <umi-space direction="vertical" align="center" :size="6">
            <umi-text>待评价</umi-text>
            <umi-text>10</umi-text>
          </umi-space>
        </umi-grid-item>
        <umi-grid-item>
          <umi-space direction="vertical" align="center" :size="6">
            <umi-text>已完成</umi-text>
            <umi-text>10</umi-text>
          </umi-space>
        </umi-grid-item>
      </umi-grid>
    </umi-card>
    <umi-card :bordered="false" v-for="item in list">
      <umi-container direction="horizontal" justify="between" padding="0 0 16px 0">
        <umi-text bold>梦马美术(茂南校区)</umi-text>
        <umi-text color="#ff0000" v-if="item.statusValue === '1'">待核销</umi-text>
        <umi-text color="#007bff" v-if="item.statusValue === '2'">待评价</umi-text>
        <umi-text color="#666" v-if="item.statusValue === '3'">已完成</umi-text>
      </umi-container>
      <umi-media :cover-props="{ width: 60, height: 60 }">
        <umi-row>
          <umi-col :span="18">
            <umi-space direction="vertical" :size="6">
              <umi-text :ellipsis="200" :line-height="18">茂名教培小蓝卡 梦马美术·八周年乐翻天豪享八重礼+最高8节课</umi-text>
              <umi-text>下单时间：2025-09-01 09:10</umi-text>
            </umi-space>
          </umi-col>
          <umi-col :span="6">
            <umi-space direction="vertical" :size="6" align="end">
              <umi-text-price align="center">98</umi-text-price>
              <umi-text color="gray">共1件</umi-text>
            </umi-space>
          </umi-col>
        </umi-row>
      </umi-media>
      <template #footer v-if="item.statusValue !== '3'">
        <umi-container direction="horizontal" justify="end" :gap="6">
          <umi-button type="primary" size="mini" v-if="item.statusValue === '1'" @click="modalVisible = true">确认核销</umi-button>
          <router-link :to="{ name: 'OrderComment' }" v-if="item.statusValue === '2'">
            <umi-button type="primary" size="mini">我要评价</umi-button>
          </router-link>
        </umi-container>
      </template>
    </umi-card>
    <umi-divider padding="0">暂无更多</umi-divider>
    <umi-modal v-model:visible="modalVisible" title="确认核销"> 您确认核销此订单吗？ </umi-modal>
  </umi-container>
</template>
